<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/JQuery-.3.6.0.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .hover {
            width: 300px;
            height: 240px;
            background-color: white;
            padding: 33px 25px 54px 25px;
            position: fixed;
            top: 165px;
            left: 650px;
        }

        .hovertext {
            color: #333333;
            font-size: 16px;
            font-weight: bold;
            margin: 0px 0px 28px 0px;
        }

        .fbox {
            width: 45px;
            height: 40px;
            /*position: relative;*/
            margin-bottom: 20px;
            border: 1px solid #dbdbdb;
            display: inline-block;
            vertical-align: top;
        }

        .box1 {
            width: 243px;
            height: 40px;
            margin-bottom: 20px;
            border: 1px solid #dbdbdb;
            display: inline-block;
            vertical-align: top;
        }

        .box2 {
            float: left;
            height: 15px;
            line-height: 15px;
            vertical-align: top;
        }

        .box3 {
            color: #848585;
            font-size: 12px;
            vertical-align: top;
            margin-left: 10px;
        }

        .box4 {
            margin-left: 160px;
            text-decoration: none;
        }

        .box4:hover {
            color: rgb(88, 154, 221);
        }

        .box5 {
            background-color: rgb(254, 150, 18);
            margin-top: 10px;
            color: white;
            float: left;
            width: 134px;
            height: 42px;
            display: block;
            font-size: 16px;
            line-height: 42px;
            text-align: center;
            font-weight: bold;
        }

        .box6 {
            margin: 10px 0px 0px 20px;
            float: left;
            width: 134px;
            height: 42px;
            display: block;
            font-size: 16px;
            line-height: 42px;
            text-align: center;
            font-weight: bold;
            color: rgb(105, 130, 158);
            background-color: #dbdbdb;
            text-decoration: none;
        }

        .boxhover:hover {
            cursor: pointer;
            /*position: relative;*/
        }
    </style>
</head>
<body background="../image1/bg.jpg">
<div class="hover" style="border:1px solid black;">
    <div class="hovertext">账户登录</div>
<!--    <form style="font-size:0px;" action="../../user/login" method="POST" id="login">-->
        <div class="fbox">
            <img height="40" src="../image1/1.png">
        </div>
        <input id="username" class="box1" name="username" type="text" placeholder="请输入帐号"></input><br>
        <div class="fbox">
            <img height="40" width="46" src="../image1/2.png">
        </div>
        <input id="pwd" class="box1" name="pwd" type="password" placeholder="请输入密码"></input>
        <a class="box3 box4" href="XGMIM.html">修改密码</a>
        <input class="boxhover box5" type="button" value="登录" onclick="login()">
        <a class="boxhover box6" href="ZCUser.html">注册</a>
<!--    </form>-->
</div>
</body>
<script src="../js/jquery.form.min.js"></script>
<script>
    function login() {
        var username = $("#username").val();
        var pwd = $("#pwd").val();
        $.post("../../user/login",{username:username,pwd:pwd},function (res) {
            if (res.status == 1){
                window.location.href='homepage.html';
            } else {
                alert(res.info);
            }
        })

    }
</script>

</html>